<template>
   
  <div>
       
    <!-- 实时疫情 -->

       
    <div class="realTime"></div>

       
    <!-- calc 在css中如果要有一些运算的处理 放在calc表达式中 -->

       
    <!-- vh视窗的高度 -->

       
    <div id="container" style="height: calc(75vh)"></div>
       
    <div style="margin-top: 10px">
           
      <el-button
        type="primary"
        size="medium"
        @click="getChainCovidData(1)"
        style="margin-left: 60px"
        >境外输入累计确诊病例</el-button
      >
           
      <el-button
        type="primary"
        size="medium"
        @click="getChainCovidData(2)"
        style="margin-left: 85px"
        >近十四日境外输入与本土疫情数据对比</el-button
      >
           
      <el-button
        type="primary"
        size="medium"
        @click="getChainCovidData(3)"
        style="margin-left: 80px"
        >国内各地区新增确诊疫情统计汇总</el-button
      >
         
    </div>
       
    <!-- <div id="container1" style="height: calc(200vh / 3)"></div>

    <div id="container2" style="height: calc(200vh / 3)"></div> -->
     
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "",
    };
  },
  mounted() {
    this.getChainCovidData(1);
  },
  methods: {
    getChainCovidData(a) {
      if (a == 1) {
        var chart = Highcharts.chart("container", {
          chart: {
            type: "column",
          },
          title: {
            text: "境外输入累计确诊省Top10",
          },
          subtitle: {
            text: "数据截止 2022-6-29",
          },
          xAxis: {
            type: "category",
          },
          yAxis: {
            min: 0,
            title: {
              text: "单位：例",
            },
          },
          tooltip: {
            pointFormat: "<b>{point.y}例</b>",
          },
          series: [
            {
              name: "境外输入累计确诊病例",
              data: [
                ["上海", 2570],
                ["广东", 2132],
                ["云南", 1142],
                ["四川", 1089],
                ["福建", 953],
                ["广西", 914],
                ["北京", 747],
                ["天津", 649],
                ["浙江", 615],
                ["陕西", 529],
              ],
            },
          ],
        });
      } else if (a == 2) {
        var chart = Highcharts.chart("container", {
          chart: {
            type: "line",
          },
          title: {
            text: "近十四日境外输入与本土疫情数据对比",
          },
          subtitle: {
            text: "数据截止 2022-6-29",
          },
          xAxis: {
            categories: [
              "6.16",
              "6.17",
              "6.18",
              "6.19",
              "6.20",
              "6.21",
              "6.22",
              "6.23",
              "6.24",
              "6.25",
              "6.26",
              "6.27",
              "6.28",
              "6.29",
            ],
          },
          yAxis: {
            title: {
              text: "单位：例",
            },
          },

          plotOptions: {
            line: {
              dataLabels: {
                // 开启数据标签
                enabled: true,
              }, // 关闭鼠标跟踪，对应的提示框、点击事件会失效 // enableMouseTracking: false
            },
          },
          tooltip: {
            headerFormat:
              '<span style="font-size: 10px">{point.key}</span><br/>',
            pointFormat:
              '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>',
            shared: true,
          },
          series: [
            {
              name: "新增境外输入疫情趋势",
              data: [7, 6, 9, 14, 18, 13, 10, 6, 5, 9, 12, 9, 10, 3],
            },
            {
              name: "新增本土疫情趋势",
              data: [3, 4, 5, 8, 11, 15, 17, 12, 11, 10, 6, 4, 3, 2],
            },
          ],
        });
      } else {
        Highcharts.getOptions().plotOptions.pie.colors = (function () {
          var colors = [],
            base = Highcharts.getOptions().colors[0],
            i;
          for (i = 0; i < 10; i += 1) {
            // Start out with a darkened base color (negative brighten), and end
            // up with a much brighter color
            colors.push(
              Highcharts.Color(base)
                .brighten((i - 3) / 7)
                .get()
            );
          }
          return colors;
        })(); // 初始化图表
        var chart = Highcharts.chart("container", {
          title: {
            text: "国内各地区新增确诊疫情统计汇总",
          },
          subtitle: {
            text: "数据截止 2022-6-29",
          },
          tooltip: {
            pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
          },
          plotOptions: {
            pie: {
              allowPointSelect: true,
              cursor: "pointer",
              dataLabels: {
                enabled: true,
                format: "<b>{point.name}</b>: {point.percentage:.0f} 例",
                style: {
                  color:
                    (Highcharts.theme && Highcharts.theme.contrastTextColor) ||
                    "black",
                },
              },
            },
          },
          series: [
            {
              type: "pie",
              name: "新增疫情占比",
              data: [
                ["台湾", 76],
                ["香港", 18],
                {
                  name: "澳门",
                  y: 22,
                  sliced: true,
                  selected: true,
                },
                ["福建", 6],
                ["广东", 5],
                ["上海", 3],
                ["浙江", 1],
              ],
            },
          ],
        });
      }
    },
  },
};
</script>

<style scoped>
</style>
